<template>
    <app-layout v-model="safePt" title="接单大厅">
        <view class="getorder-container">
            <view class="scroll-cate" :style="{ top: safePt + 'px' }">
                <scroll-view scroll-x>
                    <view class="cate-group">
                        <view
                            class="cate-item"
                            v-for="(item, index) in tabList"
                            :key="index"
                            :class="{ active: tabIndex == index }"
                            @click="tabIndex = index"
                        >
                            {{ item.name }}
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="order-group">
                <swiper
                    :current="tabIndex"
                    :style="{ minHeight: '75vh', height: tabHeight + 'px' }"
                    @change="switchTab($event.detail.current)"
                >
                    <swiper-item v-for="(item, index) in tabList" :key="index">
                        <view :class="['tab' + index]">
                            <view class="order-item-box" v-for="(v, k) in item.list" :key="k" @click.stop="toDetail(v.id)">
                                <order-item :order="v">
                                    <view class="order-action">
                                        <view class="price">
                                            <text
                                                v-if="
                                                    v.listType == 't1' ||
                                                    v.listType == 't3' ||
                                                    (v.listType == 't2' && v.orderType == 1)
                                                "
                                            >
                                                ¥ {{ v.price }}
                                            </text>
                                        </view>
                                        <get-action
                                            :order="v"
                                            @postPrice="showPostPriceModal(v.id)"
                                            @getOrder="getOrder({ id: v.id, listType: v.listType })"
                                        />
                                    </view>
                                </order-item>
                            </view>
                            <view class="loadmore-box">
                                <load-more :hasMore="item.more" @loadmore="loadData" />
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <view class="setting-btn" @click="setting">
                <text class="iconfont icon-shezhi"></text>
                <text class="text">接单设置</text>
            </view>
            <view class="refresh-btn" @click="refresh">
                <text class="iconfont icon-shuaxin"></text>
                <text class="text">刷新列表</text>
            </view>
        </view>
        <get-post-price v-show="showPriceModal" @close="showPriceModal = false" @post="postPrice" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import GetAction from "@/components/get/action";
import OrderItem from "@/components/order/item";
import GetPostPrice from "@/components/get/post-price";
import LoadMore from "@/components/widgets/loadmore";
import { mapState } from "vuex";
export default {
    name: "get-index",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            showPriceModal: false,
            safePt: 0,
            tabIndex: 0,
            tabHeight: 0,
            tabList: [
                {
                    listType: "t1",
                    name: "全部订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t2",
                    name: "报/议价订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t3",
                    name: "配送订单",
                    page: 1,
                    more: true,
                    list: [],
                },
            ],
        };
    },
    components: {
        AppLayout,
        GetAction,
        OrderItem,
        GetPostPrice,
        LoadMore,
    },
    computed: {
        ...mapState({
            refreshGet: (state) => state.system.refreshGet,
            getTabIndex: (state) => state.system.getTabIndex,
        }),
    },
    onLoad() {
        this.pageConfig = getApp().globalData.pageConfig;
    },
    onShow() {
        if (this.refreshGet && this.getTabIndex == this.tabIndex) {
            this.switchTab(this.tabIndex);
        }
        if (this.getTabIndex != this.tabIndex) {
            // #ifdef H5
            setTimeout(() => {
                this.tabIndex = this.getTabIndex;
            }, 10);
            // #endif
            // #ifndef H5
            this.tabIndex = this.getTabIndex;
            // #endif
        }
    },
    onReady() {},
    onHide() {},
    onReachBottom() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.switchTab(this.tabIndex);
        uni.stopPullDownRefresh();
    },
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 切换列表
         */
        switchTab(index) {
            this.$store.commit("system/getTabIndex", index);
            this.tabIndex = index;
            let currentTab = this.tabList[index];
            currentTab.page = 1;
            currentTab.more = true;
            currentTab.list = [];
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            });
            this.loadData();
        },
        setTabHeight() {
            let query = uni.createSelectorQuery().in(this);
            query.select(".tab" + this.tabIndex).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        /**
         * 加载数据
         */
        loadData() {
            let currentTab = this.tabList[this.tabIndex];
            return new Promise((resolve, reject) => {
                if (!currentTab.more) {
                    return;
                }
                this.$models.get
                    .getList({
                        request: {
                            api: "get.list." + currentTab.listType,
                            data: {
                                page: currentTab.page,
                            },
                        },
                        listType: currentTab.listType,
                    })
                    .then((list) => {
                        if (list.length == 0) {
                            currentTab.more = false;
                        } else {
                            currentTab.page++;
                            currentTab.list = currentTab.list.concat(list);
                        }
                        this.$nextTick(() => {
                            this.setTabHeight();
                        });
                    })
                    .catch((e) => {
                        const that = this;
                        uni.showModal({
                            title: "无法接单",
                            content: e,
                            showCancel: false,
                            success(success) {
                                if (success.confirm) {
                                    that.$utils.toPage("", {}, "back");
                                }
                            },
                        });
                    });
            });
        },
        /**
         * 报价
         */
        showPostPriceModal(id) {
            this.$store.commit("order/setPostId", id);
            this.showPriceModal = true;
        },
        /**
         * 确认价格
         */
        postPrice(e) {
            this.showPriceModal = false;
            this.getOrder({
                id: e.id,
                listType: "t2",
                price: e.price,
            });
        },
        /**
         * 接单
         */
        getOrder(order) {
            let requestData = {
                id: order.id,
            };
            if (order.price) {
                requestData.money = order.price;
            }
            this.$models.get
                .getOrder({
                    api: "get.getOrder." + order.listType,
                    data: requestData,
                })
                .then((message) => {
                    this.$utils.toast(message).then(() => {
                        this.switchTab(this.tabIndex);
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
        setting() {
            this.$utils.toPage("/pages/member/service-info");
        },
        /**
         * 刷新列表
         */
        refresh() {
            this.switchTab(this.tabIndex);
        },
        /**
         * 查看详情
         */
        toDetail(id) {
            this.$store.commit("system/refreshGet", false);
            let currentTab = this.tabList[this.tabIndex];
            this.$utils.toPage("/pages/get/detail?list=" + currentTab.listType + "&id=" + id);
        },
    },
};
</script>

<style lang="less" scoped>
.getorder-container {
    width: 100%;
    padding-bottom: 120rpx;
}
.scroll-cate {
    z-index: 15;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #7286f1;
}
.cate-group {
    width: 100%;
    height: 96rpx;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 5rpx 0;
    display: flex;
    justify-content: center;
    .cate-item {
        display: inline-block;
        height: 86rpx;
        line-height: 86rpx;
        margin: 0 20rpx;
        color: #ffffff;
    }
    .cate-item.active {
        box-sizing: border-box;
        border-bottom: 7rpx solid #ffffff;
    }
}
.order-group {
    z-index: 10;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-top: 122rpx;
    .order-item-box {
        margin-bottom: 26rpx;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 40rpx;
        .order-action {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .price {
            width: 250rpx;
            font-size: 42rpx;
            font-weight: bold;
            color: #ec7655;
            line-height: 42rpx;
            flex-shrink: 0;
        }
    }
    .loadmore-box {
        padding: 20rpx 0;
    }
}
.common-bottom-components {
    .setting-btn {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #999999;
        .iconfont {
            font-size: 46rpx;
        }
        .text {
            font-size: 24rpx;
        }
    }
    .refresh-btn {
        width: 520rpx;
        height: 76rpx;
        border: 1px solid #999999;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999999;
        .iconfont {
            font-size: 46rpx;
            margin-right: 24rpx;
        }
        .text {
            font-size: 36rpx;
        }
    }
}
</style>